import React from "react";
import ChatBubble from ".";
import VoiceMessage from "components/VoiceMessage";

export default {
  title: "UI 组件/ChatBubble",
  component: ChatBubble,
  decorators: [(storyFn) => <div style={{ margin: "24px" }}>{storyFn()}</div>],
};

export const FromOthers = () => (
  <ChatBubble time="昨天 下午12:00">你好，很高兴认识你</ChatBubble>
);

export const VoiceMessageType = () => {
  return (
    <ChatBubble time="今天 中午12:00">
      <VoiceMessage time="01:34" />
    </ChatBubble>
  );
};

export const VoiceMessageMine = () => {
  return (
    <ChatBubble type="mine" time="今天 中午12:00">
      <VoiceMessage type="mine" time="01:34" />
    </ChatBubble>
  );
};

export const Default = () => {
  return (
    <ChatBubble type="mine" time="昨天 下午12:00">
      我也很高兴认识你
    </ChatBubble>
  );
};
